<template>
	<view class="public-publish-and-draft-buttons">
		<template v-if="$_loginOrNot()">
			<view
				v-if="Config.draft.display"
				@click="$_To('editor/draft')"
				class="draft-button">
				<text class="digit" v-if="numberOfDrafts">{{numberOfDrafts}}</text>
				<text :class="'iconfont '+Config.draft.iconfont" :style="'color:'+Config.draft.color+';'"></text>
			</view>
			<view
				v-if="Config.publish.display"
				@click="$_To('editor/editor?type=new')"
				class="publish-button">
				<text :class="'iconfont '+Config.publish.iconfont" :style="'color:'+Config.publish.color+';'"></text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"public-publish-and-draft-buttons",
		props:{
			Config:{
				type:Object,
				default:""
			}
		},
		data() {
			return {
				numberOfDrafts:""
			};
		},
		mounted(){
			this.getDrafts()
		},
		methods:{
			getDrafts(){
				this.$_Request(
					"GET","/api/v2/editor/post/drafts",{},
					(res) => {
						this.numberOfDrafts = res.data.data.paginate.total;
					}
				)
			}
		},
	}
</script>

<style lang="scss" scoped>
.public-publish-and-draft-buttons{
	.publish-button{
		position: fixed;
		right: 25rpx;
		// #ifdef H5
		bottom: 150rpx;
		// #endif
		// #ifndef H5
		bottom: 25rpx;
		// #endif
		box-shadow: 0 0 18rpx #DDD;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		z-index: 999;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size: 50rpx;
			color: $LanSe;
		}
	}
	.draft-button{
		position: fixed;
		right: 25rpx;
		// #ifdef H5
		bottom: 280rpx;
		// #endif
		// #ifndef H5
		bottom: 150rpx;
		// #endif
		box-shadow: 0 0 18rpx #DDD;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		z-index: 999;
		background: #FFF;
		.icon-yanchu1{
			width: 100rpx;
			height: 100rpx;
			font-size: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $JuHuang;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.digit{
			background: $HongSe;
			font-size: 18rpx;
			line-height: 18rpx;
			color: #FFF;
			width: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 2;
			border-radius: 100rpx;
		}
	}
}
</style>